<template>
  <div>
    <div v-if="empty">
      <ElButton size="small" type="success"
        :disabled="recording" @click="record">
        {{ recording ? '录制中...' : '录制' }}
      </ElButton>
    </div>
    <div v-else flex>
      <ElButton size="small" type="primary" @click="checkMove">检验</ElButton>
      <ElButton size="small" type="warning":disabled="recording" @click="record">
        {{ recording ? '录制中...' : '重新录制' }}
      </ElButton>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { tMousePosition } from '~/models/pyBundles/bunKeyMouse';
import type { InterfaceType } from '~/models/types/interface_type';
import type { DataType } from '~/models/types/type';
import { defaultTaskManager } from '~/models/Task/TaskManager';

interface _MousePosition {
  windowname: string
  windowposition: {
    x: number
    y: number
  }
  windowsize: {
    width: number
    height: number
  }
  screensize: {
    width: number
    height: number
  }
  globalposition: {
    x: number
    y: number
  }
}

const props = defineProps<{
  type: DataType,
  modelValue: _MousePosition
}>()
const emit = defineEmits<{
  (e: 'update:modelValue', event: _MousePosition): void,
}>()

const t = computed(() => props.type as InterfaceType)

const empty = computed(() => {
  const gpos = props.modelValue.globalposition
  return gpos.x === 0 && gpos.y === 0
})

const recording = ref(false)
async function record() {
  recording.value = true
  const code = await loadCode('单点录制')
  const point = await defaultTaskManager.value.execForData(code)
  if (props.type.receiveValue(point)) {
    emit('update:modelValue', point)
  }
  else {
    console.log('后端返回异常', point)
  }
  recording.value = false
}

async function checkMove() {
  // target_title
  const codePre = `\
mouse_position = ${JSON.stringify(props.modelValue)}
`
  const code = await loadCode('移动到点')
  defaultTaskManager.value.exec(codePre + code, true)
}
</script>

<style lang="scss">
.var-input-bool {
  .el-checkbox__input {
    background: #fff;
    overflow: hidden;
    border-radius: 2px;
  }
}


</style>